<template>
	<!-- 头部 -->
	<view>
		<view class="my-header">
			<view class="my-header_background">
				<image src="" mode=""></image>
			</view>
			<!-- 头像 -->
			<view class="my-header_logo" >
				<!-- 头像box -->
				<view class="my-header_logo-box">
					<!-- 图片链接 -->
						<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								@click="upload"
								name="1"
								multiple:maxCount="10"
							></u-upload>
						<!-- <image src="../../static/active2.png" mode="aspectFill"></image> -->
				</view>
			</view>
			
		</view>

		<!-- 地址 -->
		<view class="my-content">
			<view class="my-content_list">
				<view class="my-content_list-title">
					<uni-icons type="release" size="16" color="#666"></uni-icons>
					<text><text style="color:#007AFF; font-family:Arial, Helvetica, sans-serif;font-size: 45rpx;">地址: </text>{{user.address}}</text>
					<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 电话 -->
		<view class="my-content">
			<view class="my-content_list">
				<view class="my-content_list-title">
					<uni-icons type="release" size="16" color="#666"></uni-icons>
					<text><text style="color:#007AFF; font-family:Arial, Helvetica, sans-serif;font-size: 45rpx;">电话: </text>{{user.phone}}</text>
					<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
				</view>
			</view>
		</view>
		<!-- email -->
		<view class="my-content">
			<view class="my-content_list">
				<view class="my-content_list-title">
					<uni-icons type="release" size="16" color="#666"></uni-icons>
					<text><text style="color:#007AFF; font-family:Arial, Helvetica, sans-serif;font-size: 45rpx;">邮箱: </text>{{user.email}}</text>
					<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
				</view>
			</view>
		</view>
		<view style="padding: 20px;">
				<u-button type="primary" @click="editUser()" :plain="true" text="编辑资料"></u-button>
		</view>
		<view style="padding: 20px;">
				<u-button type="primary" :plain="true" text="修改密码"></u-button>
		</view>
		
		
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList1: [],
			user:{},
			disabled: true,
			id:"",
			image:""
		};
	},
	onLoad(option) {
		uni.request({
			url:"http://localhost:10002/user/findOne",
			method:"POST",
			data:{
				id:"1",
			},
			success:(res) => {
				console.log(res.data.data);
				this.user = res.data.data;
				this.image = res.data.data.userImage
			}
		})
	},
	methods:{
		upload(){
						uni.chooseImage({
							count:4,
							//使用箭头函数，保证this对象被识别
							success:(res) => {
								const tempFilePaths = res.tempFilePaths;
								const uploadTask = uni.uploadFile({
									url: 'http://localhost:1818/img/uploadImg/',
									filePath: tempFilePaths[0],
									name: 'image',
									success:(uploadRes) => {
										let res = JSON.parse(uploadRes.data);
										console.log(res.data);
										this.imgArr = [...this.imgArr, res.data]
									}
								});
							}
						})
					},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		myInformation(){
			uni.navigateTo({
			    url: './myInformation'
			});
		},
		editUser(){
			uni.navigateTo({
			    url: './editUser'
			});
		}
	}
	
}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.my-header{
		position: relative;
		padding-bottom: 90rpx;
		.my-header_background{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			filter: blur(8rpx);
			opacity: 0.3;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.my-header_logo{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 60rpx;
			.my-header_logo-box{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.my-header_name{
				margin-top: 15rpx;
				font-size: 40rpx;
				font-weight: bold;
			}
			
		}
		.my-header_info{
			margin-top: 45rpx;
			display: flex;
			.my-header_info-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 30rpx;
				color: #999;
				.my-header_info-title{
					font-size: 30rpx;
					color: #333;
				}
			}
		}
	}

.my-content{
	.my-content_list{
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
		color: #333;
		font-size: 35rpx;
		.my-content_list-title{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
		}
	}
}
</style>